<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>竞赛信息</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="css/jquery.sPage.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/requestUrl.js"></script>
    <script src="js/jquery.sPage.js"></script>
    <style>
        /*.head-choose .container .active {*/
        /*    background-color: #006633;*/
        /*}*/
        .position {
            width: 1150px;
            margin: 0 auto;
        }

        .select {
            width: 1150px;
            margin: 0 auto
        }
    </style>
</head>

<body>
<!-- 头部导航 -->
<div class="head">
    <div style="background: #006633">
        <div class="container">
            <div style="line-height: 30px;color:#fff;position: absolute;font-size:12px;">山东省足球运动协会欢迎您！</div>
            <div class="do">
                <div class="does1" style="display: block;">
                    <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"><span>登录</span></a>
                    |
                    <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/register.html"><span>注册</span></a>
                </div>
                <div class="does2" style="display:none">
                    <span>欢迎<span id="telphone" style="margin:0"></span></span>
                    |
                    <span><a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/personal.html"
                             id="nickname">个人中心</a></span>
                    |
                    <span class="logout" style="cursor: pointer;">退出</span>
                </div>
            </div>
        </div>
    </div>
    <div class="head-choose">
        <div class="container">
            <img src="http://newtest.sdfa.org.cn/webfile//public/headicon.png"
                 style="position: absolute;top: 15px;">
            <a href="http://newtest.sdfa.org.cn/">
                <div class="headtext">
                    <div class="headtext1">山东省足球运动协会</div>
                    <div class="headtext2">SHANDONG FOOTBALL ASSOCIATION</div>
                </div>
            </a>
            <div style="display:inline-block;margin-left:302px">
                <div class="choosea">
                    <a href="http://newtest.sdfa.org.cn/index.html?id=67">
                        <div>首页</div>
                    </a>
                    <div class="choosea-2">
                    </div>
                </div>
                <div class="choosea">
                    <a href="http://newtest.sdfa.org.cn/notice.html?id=68">
                        <div>通知公告</div>
                    </a>
                    <div class="choosea-2">
                        <a href="http://newtest.sdfa.org.cn/notice.html?id=68&amp;item=1">
                            <div>公告规程</div>
                        </a>
                        <a href="http://newtest.sdfa.org.cn/notice.html?id=68&amp;item=2">
                            <div>政策法规</div>
                        </a>
                    </div>
                </div>
                <div class="choosea">
                    <a href="javascript:void(0);">
                        <div>足球专区</div>
                    </a>
                    <div class="choosea-2">
                        <a href="http://newtest.sdfa.org.cn/soccernotice.html?id=70">
                            <div>女足专区</div>
                        </a>
                        <a href="http://newtest.sdfa.org.cn/prefecture.html?id=71&item=2&child=1">
                            <div>青少年足球</div>
                        </a>
                        <a href="http://newtest.sdfa.org.cn/soccernotice.html?id=72">
                            <div>社会足球</div>
                        </a>
                    </div>
                </div>
                <div class="choosea">
                    <a href="http://newtest.sdfa.org.cn/otherplace.html?id=87">
                        <div>各地足协</div>
                    </a>
                    <div class="choosea-2">
                    </div>
                </div>
                <div class="choosea">
                    <a href="http://newtest.sdfa.org.cn/shopping/index.htm" target="_blank">
                        <div>商城</div>
                    </a>
                    <div class="choosea-2" target="_blank">
                    </div>
                </div>
                <div class="choosea">
                    <a href="http://newtest.sdfa.org.cn/aboutus.html?id=77">
                        <div>关于我们</div>
                    </a>
                    <div class="choosea-2">
                    </div>
                </div>
            </div>
            <form action="result.html" method="post">
                <div class="input-group">
                    <input type="text" name="word" value="" autocomplete="off" class="form-control"
                           placeholder="请输入您要搜索的内容">
                    <span class="glyphicon glyphicon-search" onclick="$('.head form').submit()"></span>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="clear"></div>
<div class="center" id="play_list">
    <div class="position">当前位置：竞赛信息</div>
    <div class="select">
        <ul>
            <li>
                <select id="s_province" name="s_province" @click="settime"></select>
            </li>
            <li>
                <select id="s_city" name="s_city"></select>
            </li>
            <li>
                <select name="" id="date">
                    <option value="1">今年发布</option>
                    <option value="2">最近一月</option>
                    <option value="3">最近一周</option>
                </select>
            </li>
            <li>
                <select name="" id="type">
                    <option value="">全部类型</option>
                    <option value="">省联赛</option>
                    <option value="">省内联赛</option>
                    <option value="">地方赛事</option>
                </select>
            </li>
        </ul>
        <div class="clear"></div>
        <div class="search">
            <input type="text" class="value" value="" placeholder="请输入赛事关键字">
            <div class="search_btn" @click="search_btn()">查找赛事</div>
        </div>
    </div>
    <div class="play_list">
        <ul style="min-height: 500px">
            <li v-for="(item, index) in items" @mouseenter="mouseenter(index)" @mouseleave="mouseleave(index)">
                <a :href="'contest_detail.html?id='+ item.id">
                    <img :src='item.imgUrl' alt="">
                    <div class="desc">
                        <h2>{{item.title}}<span>{{item.type}}</span></h2>
                        <p>比赛日期：{{item.date}}</p>
                        <p>比赛地点：{{item.address}}</p>
                    </div>
                </a>
            </li>
        </ul>
        <div id="myPage" style="text-align: center;margin:40px 0"></div>
    </div>
</div>
<!-- 底部 -->
<div class="footer" style="min-width: 100%;">
    <div>
        版权所有：山东省足球运动协会官方网站
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        ICP经营许可证：鲁ICP备15020327号
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        山东乐体网络科技有限公司
    </div>
</div>

</body>
<script src="../footBallAdmin/js/area.js"></script>

<script>
    _init_area();
    var timeout
    // 全局缓存global_nickName
    var global_nickName = sessionStorage.nickName;
    var global_userId = sessionStorage.userId;
    if (global_userId) {
        $('.do .does1').css('display', 'none')
        $('.do .does2').css('display', 'block')
    } else if (global_nickName == undefined || global_nickName == "") {
        $('.do .does1').css('display', 'block')
        $('.do .does2').css('display', 'none')
    }
    var global_tel = sessionStorage.tel;
    $("#telphone").text(global_tel)
    //退出
    $('.logout').click(function () {
        myAjax('/user/logout', {},
            function (data) {
                console.log(data)
                if (data.msg == 0) {
                    sessionStorage.clear()
                    location.reload()
                }
            },
            function (err) {
                console.log(err)
            })
    });
    var pageNum = 1;
    var app = new Vue({
        el: "#play_list",
        data: {
            items: [],
        },
        methods: {
            settime: function () {
                timeout = window.setTimeout(function () {
                    console.log("1111")
                    change(1)
                }, 100)
            },
            mouseenter: function (index) {
                $(".play_list ul li").eq(index).find(".desc").stop(true).animate({
                    "height": "50%"
                }, 300);
            },
            mouseleave: function (index) {
                $(".play_list ul li").eq(index).find(".desc").stop(true).animate({
                    "height": "70px"
                }, 300);
            },
            search_btn: function () {
                var that = this
                var city = $("#s_city").val(); //地区
                var province = $("#s_province").val(); //地区
                var date = $("#date option:selected").val(); //时间
                var type = $("#type option:selected").text(); //类型
                var value = $(".value").val(); //输入框内容
                myAjax('/user/competition/findCompetitionList', {
                        page: pageNum,
                        limit: 9,
                        title: value,
                        city: city,
                        province: province,
                        type: type,
                        date: date,
                    },
                    function (data) {
                        console.log(data)
                        that.items = data.data
                        $("#myPage").sPage({
                            page: pageNum, //当前页码，必填
                            total: data.count, //数据总条数，必填
                            pageSize: 9, //每页显示多少条数据，默认10条
                            showTotal: true, //是否显示总条数，默认关闭：false
                            totalTxt: "共{total}条", //数据总条数文字描述，{total}为占位符，默认"共{total}条"
                            noData: false, //没有数据时是否显示分页，默认false不显示，true显示第一页
                            showSkip: true, //是否显示跳页，默认关闭：false
                            showPN: true, //是否显示上下翻页，默认开启：true
                            prevPage: "上一页", //上翻页文字描述，默认“上一页”
                            nextPage: "下一页", //下翻页文字描述，默认“下一页”
                            backFun: function (page) {
                                pageNum = page;
                                that.search_btn();
                            }
                        });
                    },
                    function (err) {
                        console.log(err)
                    })
            },
            default: function () {
                var that = this;
                var date = $("#date option:selected").text(); //时间
                var type = $("#type option:selected").text(); //类型
                myAjax('/user/competition/findCompetitionList', {
                        page: pageNum,
                        limit: 9,
                        title: '',
                        city: '',
                        province: '',
                        type: '',
                        date: '',
                    },
                    function (data) {
                        console.log(data)
                        that.items = data.data
                        $("#myPage").sPage({
                            page: pageNum, //当前页码，必填
                            total: data.count, //数据总条数，必填
                            pageSize: 9, //每页显示多少条数据，默认10条
                            showTotal: true, //是否显示总条数，默认关闭：false
                            totalTxt: "共{total}条", //数据总条数文字描述，{total}为占位符，默认"共{total}条"
                            noData: false, //没有数据时是否显示分页，默认false不显示，true显示第一页
                            showSkip: true, //是否显示跳页，默认关闭：false
                            showPN: true, //是否显示上下翻页，默认开启：true
                            prevPage: "上一页", //上翻页文字描述，默认“上一页”
                            nextPage: "下一页", //下翻页文字描述，默认“下一页”
                            backFun: function (page) {
                                pageNum = page;
                                that.default();
                            }
                        });
                    },
                    function (err) {
                        console.log(err)
                    })
            }
        },
        created: function () {
            this.default();
        }
    })
</script>

</html>